<template>
  <div class="container m-3">
    <div class="border rounded-3 shadow p-3 m-3">
      <p>v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。</p>
      <button @click="toggle" class="btn btn-sm">{{ msg }}</button>
      <br>
      <br>
      <p v-if="flag" class="bg-success-subtle p-3 rounded-3 border">当你看到这段文字的时候，flag为真</p>
      <p v-else class="bg-danger-subtle p-3 rounded-3 border">当你看到这段文字的时候，flag为假</p>
    </div>

    <div class="border rounded-3 shadow m-3 p-3">
      <div class="card">
        <div class="card-header">v-else-if</div>
        <div class="card-body">
          <select class="form-select" aria-label="Default select example" v-model="status">
            <option>请选择</option>
            <option value=0>0</option>
            <option value=1>1</option>
            <option value=2>2</option>
          </select>
          <br>
          <span v-if="status==0">未付款</span>
          <span v-else-if="status==1">未发货</span>
          <span v-else-if="status==2">已签收</span>
          <span v-else>已完成</span>
        </div>
      </div>
    </div>

    <div class="border rounded-3 shadow p-3 m-3">
      <n-card title="template切换">
        <n-space>
          <n-switch v-model:value="active">切换</n-switch>
        </n-space>
        <template v-if="active">
          <p>6666</p>
        </template>
        <template v-else>
          <p>77777</p>
        </template>
      </n-card>
    </div>

    <div class="border rounded-3 shadow p-3 m-3">
      <div class="card">
        <div class="card-header">v-show</div>
        <div class="card-body">
          <n-switch v-model:value="show"/>
          <p v-show="show">hello</p>
        </div>
      </div>
    </div>


    <div class="border rounded-3 shadow p-3 m-3">
      <h3>v-for</h3>
      <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
      </ul>
    </div>

  </div>
</template>

<script lang="ts">
import {ref} from "vue";
import {NButton, NSpace, NSwitch, NCard, NDivider} from 'naive-ui';

export default {
  data() {
    const status = ref(0)
    return {
      names: ["张三", '李四', '王五'],
      flag: false,
      status: status.value,
      active: false,
      show: false,
    }
  },
  computed: {
    msg: function () {
      return this.flag ? '关闭' : '打开';
    }
  },
  methods: {
    toggle(e:Event) {
      // console.log(e)
      // e.target.innerHTML = this.flag ? '关闭' : '打开';
      this.flag = !this.flag;
    }
  },
  mounted() {

  },
  components: {
    NButton,
    NSpace,
    NSwitch,
    NCard,
  }
};
</script>

<style scoped>

</style>